<template>
    <el-card class="box-card search-item">
        <div class="search-deb-item-container">
            <el-image class="icon-img" :src="deb.logo" alt />
            <span class="deb-title">{{deb.deb_name}}</span>
            <span class="deb-desc">{{deb.description}}</span>
        </div>
    </el-card>
</template>

<script>
export default {
    name: "searchDebItemComponet",
    props: ["deb"],
    data() {
        return {};
    },
    methods: {
        gotoDetail(id) {}
    }
};
</script>

<style>
.box-card {
    width: 100%;
    margin: 16px;
}

.box-card:hover {
    background-color: lightgrey;
}

.el-card__body {
    padding: 4px !important;
}
.search-deb-item-container {
    display: grid;
    grid-template-columns: 1fr 5fr;
    grid-template-rows: 1fr 3fr;
    column-gap: 8px;
    padding: 4px;
    /* height: 60px; */
}
.search-item .deb-title{
    padding-top: 4px;
    font-size: 1.1rem;
    justify-self: left;
}
.search-item .deb-desc{
    padding-top: 4px;
    justify-self: left;
    color: gray;
}
.search-item .icon-img {
    /* height: 60px; */
    width: 60px;
    /* max-height: 0%; */
    grid-row-start: span 2;
    justify-self: center;
    align-self: center;
    background-color: transparent;
}
</style>